<template>
  <div class="map-page">
    <page-banner title="地图导航" subtitle="探索汉中的精彩位置" />
    <div class="map-container">
      <iframe
        src="https://map.baidu.com/search/%E6%B1%89%E4%B8%AD%E5%B8%82/@11914591,3881570.75,13z?querytype=s&da_src=shareurl&wd=%E6%B1%89%E4%B8%AD&c=79&src=0&pn=0&sug=0&l=10&b=(11367719.844172185,3332537.651986755;11651654.18821192,3466733.298013245)&from=webmap&biz_forward=%7B%22scaler%22:1,%22styles%22:%22pl%22%7D&device_ratio=1"
        width="100%"
        height="600px"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </div>
  </div>
</template>

<script setup>
import PageBanner from '@/components/PageBanner.vue'
</script>

<style scoped>
.map-page {
  padding: 20px;
}

.map-container {
  margin-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
</style>